<template>
	<view class="pay">
		<view class="pay-info">
			<view class="pay-item">
				<view style="color: #999999;">订单类型</view>
				<view style="color: #333333;">活动报名</view>
			</view>
			<view class="pay-item">
				<view style="color: #999999;">订单编号</view>
				<view style="color: #333333;">{{info.order_no}}</view>
			</view>
			<view class="pay-item">
				<view style="color: #999999;">家长姓名</view>
				<view style="color: #333333;">{{info.parent_name}}</view>
			</view>
			<view class="pay-item">
				<view style="color: #999999;">家长电话</view>
				<view style="color: #333333;">{{info.parent_tel}}</view>
			</view>
			<view class="pay-item">
				<view style="color: #999999;">孩子姓名</view>
				<view style="color: #333333;">{{info.child_name}}</view>
			</view>
			<view class="pay-item">
				<view style="color: #999999;">孩子年龄</view>
				<view style="color: #333333;">{{info.child_age}}</view>
			</view>
			<view class="pay-item">
				<view style="color: #999999;">应付金额</view>
				<view style="color: #FF5F49;">￥{{info.payment}}</view>
			</view>
		</view>
		<view class="wei" >
			<view class="wei-left">
				<image src="../../static/images/weixin.png"></image>
				<text style="padding-left: 10px;font-weight: bold;color: #333333;">微信支付</text>
			</view>
			  <label class="radio"><radio value="r1" checked="weichecked" /></label>
		</view>
		
		<!--分享弹框-->
		<uni-popup ref="popuphy" type="center"  :maskClick="false" >
			<view class="hun-wrapper">
				<view class="huany">
					<view class="hun-body">
						<image :src="srcImg" class="hu-bg"></image>
						<!-- <limePainter v-if="isShowPainter" isRenderImage custom-style="display: table-cell;text-align: center;vertical-align: middle;" :board="base" @success="path = $event"  v-on:childByValue="childByValue"></limePainter> -->
						<image src="../../static/images/gb.png" class="guan-img"  @click="hanldNoGood()"></image>
					</view>
				</view>
			
			</view>
			<view class="hun-but">
					<view class="hun-we">
						<button class="btn activ-share-but" open-type="share" style="padding: 0;margin: 0;">
							<image src="../../static/images/fenx.png" class="hun-img"></image>
							
							<view style="margin-top: 10px;">分享好友</view>
						</button>
					</view>
					<view class="hun-we" >
						<image src="../../static/images/xiazai.png" class="hun-img" @click="downloadImageOfMp(srcImg)"></image>
						<view>保存图片</view>
					</view>
			</view>
		</uni-popup>
	
		
		<view class="init-but"  @click="hanldPaly()" v-if="status==0">
			<view class="but-apply">立即支付</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	
	   
	
	export default {
		data() {
			return {
			     parent_name:"",//家长姓名
				 parent_tel:"",//家长电话
				 child_name:"",//孩子姓名
				 child_age:'',//孩子年龄
				 info:"",
				 seveAlt:false,
				 act_id:"",
				img:"",
				title:"",
				srcImg:"",//二维码
				status:"",//订单状态
				act:"",//活动id
				
				weichecked:true
			
		
			
				
			}
		},
	components: {
		uniPopup
	},
	onUnload() {//如果页面被卸载时被执行
		console.log('如果页面被卸载时被执行')
		uni.switchTab({
			url: '/pages/find/find'
		})
	},
		onLoad(option){
			console.log(option)
			 if(option.id){
				this.img = option.img;
				this.title = option.title;
				 let signInfo = JSON.parse(option.id);
				 this.info = signInfo.data;
				 console.log(this.info)
				 this.status = this.info.status;
				 this.act_id = this.info.act_id;
				 console.log(this.status+"this.status")
				 // if(this.status!==0){
					//  this.$refs.popuphy.open();
				 // }
				 this.getMiniScene();
			 }
			 if(option.act){
				 this.act_id = option.act;
			 }
		},
		onShow(){
			// this.$refs.popuphy.open();
			// this.getMiniScene();
			// if(this.ddd==false){
				// this.$refs.popuphy.open()
			// }
		

			
		},
		onShareAppMessage() {
			return {
				title: this.title,
				imageUrl: this.img,
				path: `/pages/find/activityInfo?address=${this.act_id}` 
			}
			// this.$common.navigateTo('/pages/classify/productList?indexId='+indexId+'&title=电器');
			console.log(path)
		},
		
		
		methods: {
			
		
			
			
			
			getMiniScene() {
				const params = {
					act: this.act_id,
				}
				this.$http.get('/wechat/miniScene', {
						params: params
					}).then((response) => {
					const res = response.data;
					console.log(res)
					if(res.code==0){
						this.srcImg = res.data.src;
						if(this.status!==0&&this.srcImg!=''){
							uni.showToast({
							    title: '报名成功',
							    duration: 1000,
								icon:"success"
							});
							let that = this;
							setTimeout(function(){ 
								that.$refs.popuphy.open();
								uni.hideToast();
							}, 1000);
						}
					}
				})
			},
			
			
			
			//关闭
			hanldNoGood(){
				this.$refs.popuphy.close();
				uni.switchTab({
					url: '/pages/find/find'
				})
			},
			downloadImageOfMp(image) {
				let _this = this
			
				uni.downloadFile({
					url: image,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								});
							},
							fail() {
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
							}
						});
					},
					fail() {
						_this.$common.errorToShow('下载失败')
					}
				})
			},
			//微信支付
			hanldPaly() {
				uni.showLoading({
				    title: '加载中'
				});
				let that = this;
					const formData = {
					  id: that.info.id
					}
					this.$http.post('/wechat/wxPay', formData).then((response) => {
						const res = response.data;
						console.log(res)
						if(res.code==0){
							wx.requestPayment({
							  timeStamp: res.data.timeStamp,
							  nonceStr: res.data.nonceStr,
							  package: res.data.package,
							  signType: "MD5",
							  paySign: res.data.paySign,
							  success(res) {
								  console.log(res)
								  console.log('res.msg')
								  if(res.errMsg=='requestPayment:ok'&&that.srcImg!=''){
									  uni.showToast({title:'报名成功', icon:"success"});
									  
									  uni.showToast({
									      title: '报名成功',
									      duration: 1000,
										  icon:"success"
									  });
									  setTimeout(function(){ 
									  	that.$refs.popuphy.open();
									  	uni.hideToast();
									  }, 1000);
								  }
								
								console.log(that.$refs.popuphy)
								console.log("that.$refs.popuphy")
								// that.seveAlt = true;
							    console.log(res + "支付接口");
							  },
							  fail(res) {
								 uni.showToast({title:'支付失败', icon: 'none'});
							    // const url = "../order/main";
							    // wx.navigateTo({ url });
							    console.log(res);
							  }
							});
						}
						uni.showToast({title: res.msg, icon: 'none'});
						uni.hideLoading();
					})
				
				
				
				
				
				
			  //  console.log(that.invoice);
			  //  console.log(that.type);
			  //   console.log(that.buyername);
			  // wx.request({
			  //   method: "POST",
			  //   url: that.$store.state.baseUrl + "/order/order_pay",
			  //   data: {
			  //     order_id: that.order_id
			  //   },
			  //   header: {
			  //     token: wx.getStorageSync("token")
			  //   },
			  //   success: res => {
			  //     console.log(res.data);
			  //     wx.showToast({
			  //       title: res.data.msg,
			  //       icon: "none",
			  //       duration: 2000
			  //     });
			  //     wx.requestPayment({
			  //       timeStamp: res.data.data.timeStamp,
			  //       nonceStr: res.data.data.nonceStr,
			  //       package: res.data.data.package,
			  //       signType: "MD5",
			  //       paySign: res.data.data.paySign,
			  //       success(res) {
			  //         that.setmobile();
			  //         const url = "../reservaSuccess/main";
			  //         wx.navigateTo({ url });
			  //         console.log(res + "支付接口");
			  //       },
			  //       fail(res) {
			  //         const url = "../order/main";
			  //         wx.navigateTo({ url });
			  //         console.log(res);
			  //       }
			  //     });
			  //   }
			  // });
			}
		}
	}
</script>

<style>
	.pay{
		width: 100%;
		position: relative;
	}
.pay-info{
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border-radius: 5px;
	margin: 10px 17px;
	font-size: 14px;
}
.pay-item{
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	padding: 14px 10px;
	border-bottom: 1px solid #F5F5F5;
}
.pay-item:last-child { 
		border-bottom:none !important;
	}
	.wei-left image{
		width: 28px;
		height: 28px;
	}
	.wei{
		background:rgba(255,255,255,1);
		border-radius:5px;
		margin: 0 17px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10px 13px;
	}
	.wei-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	/**/
	.hun-wrapper{
		display: flex;
		flex-direction: column;
	}
	.hun-but{
		height: 127px;
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99999999999;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		left: 0;
	}
	.hun-body{
margin-top: -100px;
position: relative;

	}
	.guan-img{
		position: absolute;
		right: 20rpx;
		top:20rpx;
		z-index: 9999999999;
		width: 24px;
		height: 24px;
	}
	.hu-bg{
		height: 800upx;
		width: 590upx;
	}
	.guan-img{
		
	}
	.hun-img{
		width: 50px;
		height: 50px;
	}
	.activ-share-but{
		background: none;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
			line-height: inherit;
	}
	
	.init-but{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.but-apply{
		
		background: #FF5F49;
		border-radius: 5px;
		height: 44px;
		margin: 30px 37px;
		color: #fff;
		text-align: center;
		line-height: 44px;
	}
</style>
